<template>
  <el-dialog title="预览文章" :visible="isPreview" width="35%" @close="close">
    <template>
      <h1>{{ info.title }}</h1>
      <div>
        <span>{{ FormatDateTime(info.createTime) }}</span>
        <span>{{ info.username }}</span>
        <span data-v-f6f15582="" class="el-icon-view"></span>
        <span>{{ info.visits }}</span>
      </div>
      <div class="content" v-html="info.articleBody"></div>
    </template>
  </el-dialog>
</template>

<script>
import dayjs from 'dayjs'
export default {
  props: {
    isPreview: {
      type: Boolean,
      required: true
    },
    info: {
      type: [Object, String],
      required: true
    }
  },
  created () {
    console.log(this.info)
  },
  methods: {
    close () {
      this.$emit('update:isPreview', false)
    },
    FormatDateTime (t) {
      return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style  scoped>
.content {
  margin-top: 10px;
  background: #f5f5f5;
  padding: 10px;
}
span {
  margin-right: 20px;
}
p {
  font-size: 22px;
}
</style>
